<script setup lang="ts">
import { WarningFilled, Close } from "@element-plus/icons-vue";
import {ref , watch} from "vue";
interface Props{
	dialogVisible?: boolean;
	real_del_disabled?: boolean;
	real_del?: 1|0;
}
const props = withDefaults(defineProps<Props>(),{
	dialogVisible:false,
	real_del_disabled:false,
	real_del:0,
});
const dialogVisible = ref<boolean>(props.dialogVisible);
const real_del_disabled = ref<boolean>(props.real_del_disabled);
const real_del = ref<1|0>(props.real_del);

watch(()=> props.dialogVisible,(newVal)=>{
    dialogVisible.value = newVal;
});
watch(()=> props.real_del_disabled,(newVal)=>{
    real_del_disabled.value = newVal;
});
watch(()=> props.real_del,(newVal)=>{
    real_del.value = newVal;
});

const emits = defineEmits<{
	(event:"update:dialogVisible",newVal:boolean):void
	(event:"update:real_del_disabled",newVal:boolean):void
	(event:"update:real_del",newVal:1|0):void
	(event:"sucess"):void
}>();

watch(()=> dialogVisible.value,(newVal)=>{
   emits("update:dialogVisible", newVal);
});
watch(()=> real_del_disabled.value,(newVal)=>{
   emits("update:real_del_disabled", newVal);
});

watch(()=> real_del.value,(newVal)=>{
   emits("update:real_del", newVal);
});

const closeDialog = () => {
	dialogVisible.value = false;
}

const confirmDel = () => {
	dialogVisible.value = false;
  emits("sucess");
}

</script>
<template>
	<div class="el-dialog-confirm">
	 <el-dialog
			    v-model="dialogVisible"
			    width="30%"
			  >
			    <div class="relative"> 
						<div class="h-[20px] flex justify-end">
								<el-icon class="thumb" @click="closeDialog"  size="25"><Close /></el-icon>
						</div>
						<div class="flex items-center">
							<el-icon color="#e6a23c" size="25"><WarningFilled /></el-icon>
							<span class="text-[20px] ml-[5px]">确定要删除文件吗?</span>
						</div>
						<el-checkbox 
						:disabled="real_del_disabled"
						:true-label="1" 
		                :false-label="0"
						class="mt-[5px] ml-[5px]" v-model="real_del" label="  彻底删除文件(释放文件空间)" />
					 </div>
			    <template #footer>
			      <span class="dialog-footer">
			        <el-button @click="dialogVisible = false">取消</el-button>
			        <el-button type="primary" @click="confirmDel">
			          确定
			        </el-button>
			      </span>
			    </template>
			  </el-dialog>
				</div>
</template>
<style scoped lang="scss">
@import "./index.scss";
</style>
